wx.request网络请求

本文编辑：  toBeMN浏览 35133 7 版权所有，严禁转载

接口说明:

wx.request是小程序客户端与服务器端交互的接口（类似javascript的ajax请求），只能发起 HTTPS 请求。一个微信小程序，同时只能有5个网络请求连接，因此开发者要控制好请求的数量。由于request操作依赖网络，会造成等待，影响用户体验，因此目前只支持异步模式。

需注意：
客户端的 HTTPS TLS 版本为1.2，但 Android 的部分机型还未支持 TLS 1.2，所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本

请求参数 method 的 value 经测试（IDE和IOS）不区分大小写，默认为GET请求

小程序后台（不是接口的后台）配置的 URL 中不能带有端口号，并且不能使用localhost/127.0.0.1，想要在本地使用 localhost 进行测试，方法详见下方提供的链接

接口用法：

利用request请求访问微信小程序俱乐部提供的API

客户端展示

服务器端展示

【代码】

wxml

<view class="container">
  <button hover-class="but-hover" bindtap="insert">插入数据</button>
  <button hover-class="but-hover" bindtap="update">修改数据</button>
  <button hover-class="but-hover" bindtap="del">删除数据</button>
  <text>key:{{aKey}}
 value:{{aValue}}
 type:{{aType}}</text>
</view>

js

var app = getApp()
Page({
  data:{
    aKey:"null",
    aValue:"null",
    aType:"null"
  },
  onLoad:function(options){
    //加载时就获取后台的数据
    this.get_data()
  },
  insert:function(){
    // 插入数据
    var that=this
    wx.request({
      url: 'https://api.wxappclub.com/put',
      data: {
        appkey: 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
        key: "akey",
        value:"avalue",
        type:"String"
      },
      method:'get',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.get_data();
      }
    })
  },
  update:function(){
    // 更新数据
    var that=this
    wx.request({
      url: 'https://api.wxappclub.com/put',
      data: {
        appkey: 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
        key: "akey",
        value:"new_avalue",
        type:"String"
      },
      method:'get',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.get_data();
      }
    })
  },
  del:function(){
    //删除数据
    var that=this
    wx.request({
      url: 'https://api.wxappclub.com/del',
      data: {
        'appkey': 'hi0yhmmemhkn00ud7ne748agga7qyj1j' ,
        'key': "akey",
        'type':"String"
      },
      method:'get',
      header: {
          'Content-Type': 'application/json'
      },
      success: function(res) {
        that.setData({
          aKey:"null",
          aValue:"null",
          aType:"null"
        })
      }
    })
  },
  get_data:function(){
    // 获取数据
    var that=this;
    wx.request({
      url: 'https://api.wxappclub.com/get',
      data: {
        'appkey': 'hi0yhmmemhkn00ud7ne748agga7qyj1j',
        'key': "akey",
        'type':"String"
      },
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        if(res.data.success){
          that.setData({
            aKey:res.data.result.key,
            aValue:res.data.result.value,
            aType:res.data.result.type
          })
        }
      }
    })
  }
})

wxss

page{
  height: 100%;
  width:100%;
}
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
button{
  width:500rpx;
  margin: 10rpx 0;
}
.but-hover{
  background-color: #5CB85C;
}

主要属性：